<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>slot 用法</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>


<body>
    <div id="app">

        <h3>在子组件内使用特殊的 &lt;slot&gt; 元素就可以为这个子组件开启一个 slot （插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的 &lt;slot&gt; 标记及它的内容</h3>

        <hr />

        <child-component>
            <p>分发的内容</p>
            <p>分发的内容</p>
        </child-component>

        <hr />

        <child-component></child-component>
    </div>
</body>

<script type="text/javascript">
    // 注册组件
    Vue.component('child-component', {
        template: '<div>\
                        <slot>\
                            <p>如果父组件没有插入内容，我将作为默认出现</p>\
                        </slot>\
                    </div>'
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app"
    })
</script>

</html>